<template>
  <div class="panel-tab__content flow-task-config">
    <FormHolder label-width="80px">
      <FormItem label="存储类型" block>
        <ElRadioGroup v-model="assigneeType" size="mini" @input="val => updateProperties(val, 'AssigneeType')">
          <ElRadioButton label="static">固定</ElRadioButton>
          <ElRadioButton label="idm">身份存储</ElRadioButton>
        </ElRadioGroup>
      </FormItem>
      <template v-if="assigneeType === 'static'">
        <FormInput
          v-model="assignee"
          multiple
          tag-style
          label="分配人员"
          block
          @input="val => updateProperties(val, 'assignee')" />
        <FormItem label="候选人员" block>
          <FormInputTag
            v-model="candidateUsers"
            :object-mode="false"
            @input="val => updateProperties(val, 'candidateUsers')" />
        </FormItem>
        <FormItem label="候选角色" block>
          <FormInputTag
            v-model="candidateGroups"
            :object-mode="false"
            @input="val => updateProperties(val, 'candidateGroups')" />
        </FormItem>
      </template>
      <template v-if="assigneeType === 'idm'">
        <FormInputUser
          v-model="assigneeUsers"
          multiple
          tag-style
          label="处理人"
          block
          @input="val => updateProperties(val, 'AssigneeUsers')" />
        <FormItem label="处理规则" block>
          <InputRules v-model="assigneeRules" @input="val => updateProperties(val, 'AssigneeRules')" />
        </FormItem>
        <FormItem label="处理岗位" block>
          <InputGroups v-model="assigneeGroups" @input="val => updateProperties(val, 'AssigneeGroups')" />
        </FormItem>
      </template>
      <FormDatePicker v-model="dueDate" label="到期时间" block @input="val => updateProperties(val, `dueDate`)" />
      <FormInputNumber
        v-model="priority"
        controls
        label="优先级"
        block
        @input="val => updateProperties(val, `priority`)" />
    </FormHolder>
  </div>
</template>

<script>
  import { updateExtensionProp, getExtensionPropByElement, updateProp, getElementProp } from '../../index.js'
  import InputGroups from './InputGroups.vue'
  import InputRules from './InputRules.vue'

  export default {
    name: 'TaskConfig',
    components: { InputRules, InputGroups },
    inject: {
      prefix: 'prefix',
      width: 'width'
    },
    props: {
      id: String,
      element: Object,
      bpmnInstances: Object
    },
    data() {
      return {
        assigneeType: 'idm',
        assigneeUsers: [],
        assigneeRules: [],
        assigneeGroups: [],
        priority: 0,
        dueDate: null,
        assignee: '',
        candidateUsers: '',
        candidateGroups: ''
      }
    },
    watch: {
      id: {
        immediate: true,
        handler: 'initForm'
      }
    },
    methods: {
      initForm() {
        const assigneeNodeType = `${this.prefix}:AssigneeType`
        const assigneeUsersNodeType = `${this.prefix}:AssigneeUsers`
        const assigneeRulesNodeType = `${this.prefix}:AssigneeRules`
        const assigneeGroupsNodeType = `${this.prefix}:AssigneeGroups`

        const priority = `${this.prefix}:priority`
        const dueDate = `${this.prefix}:dueDate`

        const assignee = `${this.prefix}:assignee`
        const candidateUsers = `${this.prefix}:candidateUsers`
        const candidateGroups = `${this.prefix}:candidateGroups`

        const { businessObject } = this.element

        this.priority = getElementProp(businessObject, priority)
        this.dueDate = getElementProp(businessObject, dueDate)

        this.assignee = getElementProp(businessObject, assignee)
        let temp = getElementProp(businessObject, candidateUsers)
        this.candidateUsers = temp ? temp.split(',') : []
        temp = getElementProp(businessObject, candidateGroups)
        this.candidateGroups = temp ? temp.split(',') : []

        // 处理对象类型
        this.assigneeType = getExtensionPropByElement(this.element, assigneeNodeType) || 'idm'
        // 处理人
        const rawUsers = getExtensionPropByElement(this.element, assigneeUsersNodeType)
        this.assigneeUsers = rawUsers ? JSON.parse(rawUsers) : []
        // 处理规则
        const rawRules = getExtensionPropByElement(this.element, assigneeRulesNodeType)
        this.assigneeRules = rawRules ? JSON.parse(rawRules) : []
        // 处理岗位
        const rawGroups = getExtensionPropByElement(this.element, assigneeGroupsNodeType)
        this.assigneeGroups = rawGroups ? JSON.parse(rawGroups) : []
      },
      updateProperties(val, type) {
        const nodeType = `${this.prefix}:${type}`
        if (['priority', 'dueDate', 'assignee'].includes(type)) {
          updateProp(this.bpmnInstances, this.element, nodeType, val)
        } else if (['candidateUsers', 'candidateGroups'].includes(type)) {
          updateProp(this.bpmnInstances, this.element, nodeType, val.join(','))
        } else if (type === 'AssigneeType') {
          updateExtensionProp(this.bpmnInstances, this.element, nodeType, val)
        } else {
          updateExtensionProp(
            this.bpmnInstances,
            this.element,
            nodeType,
            (val || []).map(({ key, type, parentId, ...rest }) => rest)
          )
        }
      }
    }
  }
</script>

<style lang="scss">
  .flow-task-config {
    .el-col {
      margin-top: 10px;

      &:first-child {
        margin-top: 0;
      }
    }
  }
</style>
